*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#app {
    width: 100%;
    height: 100%;
    background-color: #F4F4F4;
    background-size: cover;
    background-position: center;
    margin:0 auto;
    header {
        position: relative;
        height: 80px;
        background: url(../images/head_bg.png) no-repeat;
        background-size: cover;
        background-position: bottom center;

        h1 {
            height: 100%;
            text-align: center;
            line-height: 65px;
            color: #fff;
        }

        .time {
            height: 100%;
            position: absolute;
            right: 40px;
            top: 0;
            color: #fff;
            font-size: 25px;
            line-height: 65px;
        }
    }

    main {
        width: 100%;
        display: flex;
        padding: 10px;

        .section1 {
            flex: 3;

        }

        .section2 {
            flex: 5;
            margin: 0 10px;
            position: relative;

            .head {
                height: 278.8px;
                width: 100%;
                background: url(../images/line.png);
                padding: 15px;
                position: absolute;
                position: relative;
                .time{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    font-size: 35px;
                }
                
                

            }

            .map {
                height: 625px;
                width: 100%;
                position: absolute;
                bottom: -1%;
  
            }
        }

        .section3 {
            flex: 3;
            position: relative;
            .operate {
                width: 80px;
                height: 180px;
                // background-color: rgba(255, 255, 255, .9);
                background-color: #F0F3FA;
                position: absolute;
                bottom: 10%;
                border-radius: 10px;
                z-index: 1;

                ul {
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    // color: #fff;

                    li {
                        height: 30px;
                        line-height: 30px;
                        padding-left: 23px;
                        cursor: pointer;
                        position: relative;
                        transition: all .3s;

                        &:hover {
                            transform: scale(1.3);

                        }

                        &::after {
                            content: '';
                            display: block;
                            width: 12px;
                            height: 12px;
                            border-radius: 6px;
                            position: absolute;
                            top: 50%;
                            left: 5px;
                            transform: translateY(-50%);
                        }

                        &:nth-child(1)::after {
                            background-color: #03CC02;
                        }

                        &:nth-child(2)::after {
                            background-color: #FEFD02;
                        }

                        &:nth-child(3)::after {
                            background-color: #5470C6;
                        }

                        &:nth-child(4)::after {
                            background-color: #FE0000;
                        }

                        &:nth-child(5)::after {
                            background-color: #9B3366;
                        }

                        &:nth-child(6)::after {
                            background-color: #815989;
                        }
                    }
                }
            }
        }

        .panel {
            position: relative;
            height: 278.8px;
            border: 1px solid rgba(25, 186, 139, 0.17);
            background: url(../images/line.png) rgba(255, 255, 255, 0.05);
            padding: 15px;
            margin-bottom: 15px;

            .chart {
                width: 100%;
                height: 100%;
            }

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 10px;
                height: 10px;
                border-top: 2px solid #6E7079;
                border-left: 2px solid #6E7079;
            }

            &::after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 10px;
                height: 10px;
                border-top: 2px solid #6E7079;
                border-right: 2px solid #6E7079;
            }

            .panel-footer {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;

                &::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 10px;
                    height: 10px;
                    border-bottom: 2px solid #6E7079;
                    border-left: 2px solid #6E7079;
                }

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: 10px;
                    height: 10px;
                    border-bottom: 2px solid #6E7079;
                    border-right: 2px solid #6E7079;
                }
            }
        }
    }


}

// body {
//     width: 100%; //1920px;
//     min-width: 1500px;
//     height: 100%; //1080px;
//     background: url(/images/bg.jpg) no-repeat;
//     background-size: cover;
//     background-position: center;



// }